<template>
  <div>
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 6 }">
      <a-card class="card" title="出单数据" :bordered="false">
        <div slot="extra">
          <a-radio-group v-model="status" @change="timeBtnChange()">
            <a-radio-button value="today">今天</a-radio-button>
            <a-radio-button value="month">本月</a-radio-button>
            <a-radio-button value="lastMonth">上月</a-radio-button>
          </a-radio-group>
          <a-range-picker @change="timeChange" :style="{width: '256px',margin:'0 0 0 16px'}" />
        </div>
        <a-card :bordered="false">
          <a-row>
            <a-col :sm="4" :xs="24">
              <head-info title="预估金额" :content="dateKpi.estimate_cos_price" :bordered="true" />
            </a-col>
            <a-col :sm="4" :xs="24">
              <head-info title="预估服务费" :content="dateKpi.estimate_commission" :bordered="true" />
            </a-col>
            <a-col :sm="4" :xs="24">
              <head-info title="结算金额" :content="dateKpi.actual_cos_price" :bordered="true" />
            </a-col>
            <a-col :sm="4" :xs="24">
              <head-info title="结算服务费" :content="dateKpi.actual_commission" :bordered="true" />
            </a-col>
            <a-col :sm="4" :xs="24">
              <head-info title="通过商品" :content="dateKpi.pass_num" :bordered="true" />
            </a-col>
            <a-col :sm="4" :xs="24">
              <head-info title="被翘商品" :content="dateKpi.loss_num" />
            </a-col>
          </a-row>
        </a-card>
      </a-card>
    </a-skeleton>
    <br />
    <a-card class="card" title="出单列表" :bordered="false">
      <a-form @submit="handleSubmit" :form="form" class="form">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="3" :md="8" :sm="24">
            <a-form-item>
              <a-select defaultValue="today" @change="todayChange">
                <a-select-option value="today">今天</a-select-option>
                <a-select-option value="yesterday">昨天</a-select-option>
                <a-select-option value="week">本周</a-select-option>
                <a-select-option value="lastweek">上周</a-select-option>
                <a-select-option value="month">本月</a-select-option>
                <a-select-option value="lastmonth">上月</a-select-option>
                <a-select-option value="quarter">半年</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="3" :md="8" :sm="24">
            <a-form-item>
              <a-input v-decorator="[ 'skuId']" placeholder="商品ID 选填" />
            </a-form-item>
          </a-col>
          <a-col :lg="3" :md="8" :sm="24">
            <a-form-item>
              <a-input v-decorator="[ 'shopName']" placeholder="店铺名称 选填" />
            </a-form-item>
          </a-col>
          <a-col :lg="2" :md="8" :sm="24">
            <a-form-item>
              <a-select defaultValue="rank" @change="typeChange">
                <a-select-option value="rank">排行</a-select-option>
                <a-select-option value="all">所有</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="2" :md="8" :sm="24">
            <a-form-item>
              <a-button htmlType="submit" type="primary">查找商品</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        :columns="columns"
        :rowKey="orderList => orderList.jdo_order_time+orderList.skuId+orderList"
        :dataSource="orderList"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <div slot="detailInfo" slot-scope="row">
          <div class="ant-list-item-meta">
            <div class="ant-list-item-meta-avatar">
              <span class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-image">
                <img :src="'https://img14.360buyimg.com/n1/'+row.jdg_image_url" />
              </span>
            </div>
            <div class="ant-list-item-meta-content">
              <div class="ant-list-item-meta-description">
                <a target="_blank" :href="'//item.jd.com/'+row.jdg_sku_id+'.html'">
                  <span class="detail-name">{{ row.jdg_sku_name }}</span>
                </a>
                <span style="color:#000">￥{{ row.jdg_price }}</span>
                <span style="margin-left:20px">{{ row.jdg_shop_name }}</span>
              </div>
            </div>
          </div>
        </div>
        <div slot="time" slot-scope="row">
          {{ row.jdg_start_time }}
          <br />
          {{ row.jdg_end_time }}
        </div>
        <span slot="finalRate" slot-scope="row">{{ row.jdo_final_Rate }}%</span>
        <span slot="serviceRate" slot-scope="row">{{ row.jdg_service_rate }}%</span>
        <span slot="skuNum" slot-scope="row">{{ row.jdo_sku_num }}</span>
        <span slot="cosPrice" slot-scope="row">￥{{ row.jdo_estimate_cos_price }}</span>
        <span slot="cosComm" slot-scope="row">￥{{ row.jdo_estimate_commission }}</span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { orderList } from '@/api/detail'
import { dateKpi } from '@/api/kpi'
import HeadInfo from '@/components/tools/HeadInfo'
import moment from 'moment'

const columns = [
  {
    title: '商品信息',
    width: 500,
    scopedSlots: { customRender: 'detailInfo' }
  },
  {
    title: '参与时间',
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '预估金额',
    scopedSlots: { customRender: 'cosPrice' }
  },
  {
    title: '预估佣金',
    scopedSlots: { customRender: 'cosComm' }
  },
  {
    title: '服务费率',
    scopedSlots: { customRender: 'serviceRate' }
  },
  {
    title: '分成比例',
    scopedSlots: { customRender: 'finalRate' }
  },
  {
    title: '下单数量',
    scopedSlots: { customRender: 'skuNum' }
  },
  {
    title: '下单时间',
    dataIndex: 'jdo_order_time'
  }
]
export default {
  name: 'EffectDetail',
  components: {
    HeadInfo,
    moment
  },
  data () {
    return {
      description: '显示你所有出单的商品列表.',
      value: 1,
      // form
      form: this.$form.createForm(this),
      columns,
      pagination: {},
      loading: false,
      skeLoading: true,
      orderList: [],
      values: {},
      timeSolt: 'today',
      type: 'rank',
      status: 'today',
      dateString: [],
      cardLoading: false,
      dateKpi: []
    }
  },
  created () {
    this.getOrderList({ timeSolt: 'today', type: 'rank', page: 1, pageSize: 15 })
    this.dateString = [moment().format('YYYY-MM-DD'), moment(new Date().toLocaleDateString()).format('YYYY-MM-DD')]
    this.getDateKpi()
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          values.type = this.type
          values.timeSolt = this.timeSolt
          this.values = values
          this.getOrderList(values)
        }
      })
    },
    todayChange (value) {
      this.timeSolt = value
    },
    typeChange (value) {
      this.type = value
    },
    handleTableChange (pagination, filters, sorter) {
      const param = this.values
      param.pageSize = pagination.pageSize
      param.page = pagination.current
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager

      this.getOrderList(this.values)
    },
    getOrderList (parameter) {
      this.loading = true
      orderList(parameter)
        .then(res => {
          this.skeLoading = false
          const pagination = { ...this.pagination }
          pagination.total = res.result.total
          this.pagination = pagination
          this.orderList = res.result.data
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    timeChange (date, dateString) {
      this.status = ''
      this.dateString = dateString
      this.getDateKpi()
    },
    timeBtnChange () {
      if (this.status === 'today') {
        this.dateString = [moment().format('YYYY-MM-DD'), moment(new Date().toLocaleDateString()).format('YYYY-MM-DD')]
      } else if (this.status === 'month') {
        this.dateString = [moment().startOf('month').format('YYYY-MM-DD'), moment().endOf('month').format('YYYY-MM-DD')]
      } else {
        this.dateString = [moment().month(moment().month() - 1).startOf('month').format('YYYY-MM-DD'), moment().month(moment().month() - 1).endOf('month').format('YYYY-MM-DD')]
      }
      this.getDateKpi()
    },
    getDateKpi () {
      this.cardLoading = true
      dateKpi({ start: this.dateString[0], end: this.dateString[1] })
        .then(res => {
          this.dateKpi = res.result
          this.cardLoading = false
        })
        .catch(() => {
          this.cardLoading = false
        })
    }
  }
}
</script>
<style>
.detail-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 16px;
  margin-bottom: 5px;
}
</style>
<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
</style>
